<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.3.4.1.js"></script>
</head>

<body>
    <button>设置 HTML元素</button>
    <button>获取 HTML元素内容</button>
    <button>设置 text内容</button>
    <button>获取 text内容</button>
    <div></div>

    <script>

        $('button').eq(0).click(function () {
            // 创建元素对象 包装为 JQuery对象
            // var aElement = $("<a href='#'>这是链接</a>");
            // $('div').html(aElement);


            // 这是 原生 DOM 元素对象添加 HTML 元素
            var div = document.querySelector('div');
            div.innerHTML = "<a href='#'>这是链接</a>";
        })

        // 2. 获取 HTML内容
        $('button').eq(1).click(function () {
            // var div = document.querySelector('div');
            // console.log(div.innerHTML);

            console.log($('div').html());

        })

        /**********************
        *  .html() 括号里面 如果放置参数表示设置
        *  .html() 括号里面 不放置任何参数表示 获取
        *  .html() 是jQuery 对象的 方法
        * */

        //  3. 给元素对象设置文本
        $('button').eq(2).click(function () {
            $('div').text('这是一个 DIV');
        })

        // 4. 获取元素文本内容
        $('button').eq(3).click(function () {
            console.log($('div').text());
        })

        /**********************
        *  .text() 括号里面 如果放置参数表示设置
        *  .text() 括号里面 不放置任何参数表示 获取
        *  .text() 是jQuery 对象的 方法
        * */





    </script>

</body>

</html>